import React, { Component } from "react";
import { Popover } from "antd";

import FloorSelector from "../components/FloorSelector";
import { maxFloor, DIRECTION } from "../define";

import arrowIcon from "../assets/arrow.svg";
import redArrowIcon from "../assets/redArrow.svg";
import "../style/elevatorPanel.css";

class ElevatorPanel extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    upEnabled: false,
    downEnabled: false,
  };
  onSelectFloor = (desFloor) => {
    const { onLaunch, currentFloor } = this.props;
    if (!Number(desFloor)) {
      console.log("error onSelectFloor-desFloor");
      return;
    }
    onLaunch(currentFloor, desFloor);
    if (desFloor > currentFloor) {
      this.setState({ upEnabled: true });
    } else {
      this.setState({ downEnabled: true });
    }
  };
  renderDirction = (direction) => {
    switch (direction) {
      case DIRECTION.UP:
        return "↑";
      case DIRECTION.DOWN:
        return "↓";
      default:
        break;
    }
    return "";
  };
  renderUpArrow = () => {
    const { upEnabled } = this.state;
    const { elevDetailArr, currentFloor } = this.props;
    if (upEnabled) {
      if (
        elevDetailArr.length > 0 &&
        elevDetailArr[0].direction === DIRECTION.UP &&
        elevDetailArr[0].position === currentFloor
      ) {
        this.setState({
          upEnabled: false,
        });
        return arrowIcon;
      }
      return redArrowIcon;
    }
    return arrowIcon;
  };
  renderDownArrow = () => {
    const { downEnabled } = this.state;
    const { elevDetailArr, currentFloor } = this.props;
    if (downEnabled) {
      if (
        elevDetailArr.length > 0 &&
        elevDetailArr[0].direction === DIRECTION.DOWN &&
        elevDetailArr[0].position === currentFloor
      ) {
        this.setState({
          downEnabled: false,
        });
        return arrowIcon;
      }
      return redArrowIcon;
    }
    return arrowIcon;
  };
  render() {
    const { currentFloor, elevDetailArr } = this.props;

    return (
      <div className="elevator-panel-root">
        <div className="elevator-number">
          {elevDetailArr.length > 0 && elevDetailArr[0].floor}
          {elevDetailArr.length > 0 && this.renderDirction(elevDetailArr[0].showDirection)}
        </div>
        <div className="operater">
          <Popover content={<FloorSelector currentFloor={currentFloor} onSelect={this.onSelectFloor} />}>
            {maxFloor !== currentFloor && <img className="up" src={this.renderUpArrow()} alt="" />}
            {1 !== currentFloor && <img src={this.renderDownArrow()} alt="" />}
          </Popover>
        </div>
        {/* <div className="elevator-number">{currentFloorArray[1]}</div> */}
      </div>
    );
  }
}

export default ElevatorPanel;
